import React, { Component } from 'react';
import { connect } from 'react-redux';
import { BarChart } from '../../charts/charts';
import { Select, DatePicker, Icon } from 'antd';
import { DragHandle } from './traffic';
import { DownLoad } from '../../charts/table';
import moment from 'moment';

const Option = Select.Option;
const { RangePicker } = DatePicker;

/**
 * 柱状图报表组件
 */
export default class BarGraph extends Component {
    getQuery() {
        let time = this.props.time, endTime = moment().format('YYYY-MM-DD'), startTime;
        switch (time) {
            case 'week':
                startTime = moment().subtract(6, 'd').format('YYYY-MM-DD');
                break;
            case 'month':
                startTime = moment().subtract(29, 'd').format('YYYY-MM-DD');
                break;
            case 'halfYear':
                startTime = moment().subtract(179, 'd').format('YYYY-MM-DD');
                break;
        }
        return {
            query: { startTime, endTime }
        }
    }
    render() {
        const { data, changeCondition, condition, conditionList, options } = this.props;
        if (condition) {
            var cur = conditionList.find(item => { return item.name == condition });
        }
        var arg = options.download, downloadUrl;
        if (arg == 'traffic' || arg == 'age' || arg == 'sequential' || arg == 'vipIncrease' || arg == 'amountAndCount') {
            downloadUrl = `/dashboard/download/${options.download}`;
        } else {
            downloadUrl = `/sales/download/${options.download}`;
        }

        return (
            <div className="box box-solid">
                <div className="box-header with-border" style={{ margin: 0, fontSize: 20 }}>
                    <DragHandle />
                    <h3 style={{ display: 'inline-block', margin: '0 10px 0 0', fontSize: 16 }}>{data.name}</h3>
                    {
                        options.download ? <DownLoad id={options.download} downloadUrl={downloadUrl} getQuery={this.getQuery.bind(this)} /> : ''
                    }
                    {
                        condition ?
                            <Select style={{ float: 'right' }} value={cur.value} onChange={changeCondition}>
                                {
                                    conditionList.map((item, index) => {
                                        return <Option key={index} value={item.name}>{item.value}</Option>
                                    })
                                }
                            </Select>
                            : ''
                    }
                </div>
                <div className="box-body">
                    {
                        !data.loading ?
                            data.data.length ?
                                <BarChart options={options} data={data.data} />
                                : <p>暂无数据</p>
                            : ''
                    }
                </div>
                {
                    data.loading ?
                        <div className="overlay">
                            <Icon className="fa" type="loading" />
                        </div>
                        : ''
                }
            </div>
        );
    }
}


